<template>
  <div class="outer-padding">
    <div class="ds-title pd-bottom--32">评价管理</div>
    <div class="search pd-bottom--32">
      <a-input-search
        v-model:value="queryParam.index"
        placeholder="搜索指标"
        style="width: 480px"
        @search="onSearch"
      />
      <div class="search-button">
        <a-button type="primary" style="margin-left: 8px" @click="openModal()">
          <template #icon>
            <icon-font type="icon-plus"></icon-font>
          </template>
          新增
        </a-button>
        <div class="ml-16">
          <a-upload name="file" :beforeUpload="() => false" @change="handleImportSheet">
            <a-button type="primary" style="marginleft: 16px">
              <template #icon>
                <icon-font type="icon-upload"></icon-font>
              </template>
              导入
            </a-button>
          </a-upload>
        </div>
        <div class="ml-16">
          <a-button type="primary">
            <template #icon>
              <icon-font type="icon-download"></icon-font>
            </template>
            导出
          </a-button>
        </div>
      </div>
    </div>
    <div class="outer-title pd-bottom--32">指标列表</div>
    <div class="tab">
      <div
        class="tab-item"
        :class="{ active: item.active }"
        v-for="item in nav"
        :key="item.id"
        @click="navTab(item)"
      >
        <p class="tab-item__title">{{ item.name }}</p>
        <p class="tab-item__text">{{ item.num }}</p>
      </div>
    </div>
    <div class="pd-top--32">
      <dynamic-table
        ref="tableRef"
        :bordered="false"
        :columns="columns"
        :get-list-func="loadData"
        rowKey="id"
      >
        <template #paraph="{ record }">
          <div style="width: 400px">{{ record.cparagraph }}</div>
        </template>
        <template #action="{ record }">
          <span
            class="pointer pdr-12"
            style="border-right: 1px solid #ddd"
            @click="openModal(record)"
          >
            <icon-font type="icon-edit"></icon-font>
            编辑
          </span>
          <a-popconfirm title="你确定要删除此条记录吗？" @confirm="deleteItem(record.id)">
            <span class="pointer pdl-12">
              <icon-font type="icon-delete"></icon-font>
              删除
            </span>
          </a-popconfirm>
        </template>
      </dynamic-table>
    </div>
  </div>
</template>
<script lang="ts">
  import { defineComponent, reactive, toRefs, ref, onMounted } from 'vue'
  import { DynamicTable, TableQueryHeader } from '@/components/dynamic-table'
  import { useRoute } from 'vue-router'
  import { useStore } from '@/store'
  import { IconFont } from '@/components/iconfont'
  import { uploadUserImage } from '@/api/common'
  import { getIndexList, delIndexbyId } from '@/api/listen'
  import { columns } from './columns'
  import { useCreateModal } from '@/hooks'
  import EditModal from './components/edit-modal.vue'

  export default defineComponent({
    name: 'Markcomponent',
    components: {
      IconFont,
      DynamicTable,
    },
    setup() {
      const tableRef = ref<InstanceType<typeof DynamicTable>>()

      const route = useRoute()

      const store = useStore()

      const state = reactive({
        queryParam: {
          index: null,
          type: 1,
        },
        nav: [
          { id: 0, name: '全部', num: 120, active: true },
          { id: 1, name: '学院指标', num: 120, active: false },
          { id: 2, name: '教师指标', num: 120, active: false },
          { id: 3, name: '学生指标', num: 120, active: false },
        ],
      })

      /**
       * @description 加载表格数据
       */
      const loadData = (params) => {
        const myParams = { ...params, ...state.queryParam }
        return getIndexList(myParams)
      }

      onMounted(async () => {})

      const onSearch = (searchValue: string) => {
        console.log('use value', searchValue)
      }

      // 切换tab
      const navTab = (step) => {
        console.log(step)
        state.nav.map((v) => (v.id === step.id ? (v.active = true) : (v.active = false)))
        state.queryParam.type = step.id
        tableRef.value?.refreshTableData()
      }

      // 导入用户信息
      const handleImportSheet = async (e, type) => {
        const { file } = e
        const params = {
          activityId: store.getters['asyncRoute/curActive']?.id,
          file: file,
        } as any

        await uploadUserImage(params)
      }

      // 编辑/新增
      const openModal = (record?) => {
        useCreateModal(EditModal, {
          fields: record,
          callback: () => {
            tableRef.value?.refreshTableData()
          },
        })
      }
      // 删除
      const deleteItem = async (id) => {
        await delIndexbyId({ id: id })
      }

      return {
        ...toRefs(state),
        tableRef,
        onSearch,
        handleImportSheet,
        navTab,
        loadData,
        columns,
        openModal,
        deleteItem,
      }
    },
  })
</script>
<style lang="less" scoped>
  .search {
    display: flex;
    width: 100%;

    .search-button {
      display: flex;
      margin-left: auto;
    }
  }

  :deep(.ant-table-row) {
    .table-button {
      padding-left: 12px;
      color: #666;
      display: inline-block;

      &:first-child {
        padding-right: 12px;
        border-right: 1px solid #ddd;
      }
    }
  }
</style>
